<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .swiper {
            position: relative;
            margin-top: 0.33rem;
            overflow: hidden;
        }

        .swiper-wrapper {
            width: 300%;
            display: flex;
        }

        .swiper img {
            display: block;
            width: 100%;
        }

        .swiper-slide {
            width: 80%;
            text-align: center;
            font-size: 18px;
            background: #fff;
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
        }
    </style>
</head>

<body>
    <div id="app">
        <header> 智慧商场 </header>
        <div class="main">
            <!-- 搜索框 -->
            <div class="search">
                <a href="./search.html"><span class="iconfont icon-sousuokuang"></span> 搜索你要找的商品</a>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <!-- 轮播图 -->
                    <div class="swiper-slide" v-for="item in swiperImg">
                        <img :src="item.imgUrl" width="100%" alt="" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            </div>

            <!-- 公告 -->
            <div class="announcement">
                <p class="iconfont icon-laba"></p>
                <p>智慧商城2.0全新上线，更多新品等你来选~</p>
            </div>
            <!-- 分类 -->
            <div class="classify">
                <a href="./classify.html" v-for="item in classify">
                    <img :src="item.imgUrl" alt="">
                    <p>{{item.text}}</p>
                </a>
            </div>
            <!-- 主会场 -->
            <div class="home">
                <img :src="gg" alt="">
            </div>
            <!-- 猜你喜欢 -->
            <div class="like">
                <p style="text-align:center;padding:5px 0;">—— 猜你喜欢 ——</p>

            </div>
            <!-- 商品列表 -->
            <div class="goods-item">
                <!-- <div class="item">
                    <div class="left_photo">
                        <img src="" alt="">
                    </div>
                    <div class="right_txt">
                        <h3></h3>
                        <p></p>
                        <p></p>
                        <span></span>
                    </div>
                </div> -->
                <a class="item" v-for="item in itemI" @click="jucp(item.goods_id)" href="./detailed.html">
                    <div class="left_photo">
                        <img :src="item.goods_image" alt="">
                    </div>
                    <div class="right_txt">
                        <h3>{{item.goods_name}}</h3>
                        <p>已售{{item.goods_sales}}</p>
                        <p>￥{{item.goods_price_max}}<span
                                v-if="item.line_price_max !== '0.00'">￥{{item.line_price_max}}</span></p>

                    </div>
                </a>
            </div>
        </div>


        <footer>
            <a href="" class="active">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
            <a href="./classify.html">
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </a><a href="./home.html">
                <i class="iconfont icon-gouwuchekong"></i>
                <p>购物车</p>
            </a><a href="./home.html">
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </a>
        </footer>
    </div>
</body>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<!-- <script src="./js/index.js"></script> -->
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            swiperImg: [],
            classify: [],
            gg: [],
            itemI: []
        },
        // 生命周期
        created() {
            this.swiperI()
        },
        // 计算
        computed: {

        },
        // 方法
        methods: {
            // 轮播图
            async swiperI() {
                const res = await axios.get(
                    "http://cba.itlike.com/public/index.php?s=/api/page/detail&pageId=0")
                console.log(res.data.data.pageData.items[1].data)
                this.swiperImg = res.data.data.pageData.items[1].data
                this.classify = res.data.data.pageData.items[3].data
                this.gg = res.data.data.pageData.items[4].data[0].imgUrl
                this.itemI = res.data.data.pageData.items[6].data
                // console.log(res.data.data.pageData.items[6].data)
            },
            jucp(id) {
                localStorage.setItem('vue-data', id)
            }
        },
        // 监听
        watch: {

        }

    })

    // 轮播图
    var mySwiper = new Swiper(".swiper", {
        speed: 300,
        loop: false,
        autoplay: 200,
        autoplay: {
            disableOnInteraction: false,
            delay: 800,
        },
        pagination: {
            el: ".swiper-pagination",
        },
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
    });
</script>

</html>